<template>
  <div class="table_user">
    <div ref='chart'></div>
    <h3 class="title">已注册用户信息</h3>
    <el-table :data="tableData" style="width:100%" height="300">
      <el-table-column fixed type="index"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column :formatter="formatterArea" prop="area" label="地区"></el-table-column>
      <el-table-column :formatter="formatterDT" prop="date" label="加入时间"></el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.current_page"
            :page-size="pagination.page_size"
            :layout="pagination.layout"
            :total="pagination.total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pagination: {
        current_page: 1,
        page_size: 5,
        layout: "total, prev, pager, next",
        total: 0
      },
      allData: [],
      tableData: []
    };
  },
  methods: {
    async getAllusers() {
      try {
        const res = await this.$req.user.getAllusers();
        if (res.data.status === 200) {
          this.allData = res.data.users;
          this.setPagination();
        } else {
          this.allData = [];
        }
      } catch (ex) {
        console.log(ex);
      }
    },
    setPagination() {
      this.pagination.total = this.allData.length;
      this.pagination.current_page = 1;
      this.tableData = this.allData.filter(
        (item, index) => index < this.pagination.page_size
      );
    },
    handleCurrentChange(page) {
      this.tableData = this.allData.filter((item, index) => {
        return (
          index < this.pagination.page_size * page &&
          index >= this.pagination.page_size * (page - 1)
        );
      });
    },
    formatterDT(row) {
      return new Date(row.date).toLocaleString();
    },
    formatterArea(row) {
      return row.area.join("/");
    }
  },
  async created() {
    await this.getAllusers();
  },
  mounted() {

  }
};
</script>
<style lang='scss' scoped>
.table_user {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>